import { getUserInfo } from '@/store/modules/user'
import { IGlobalState } from '@/store/store-types'
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { Route, Switch } from 'react-router-dom'
import { E_ROUTE_PATH } from '../../router/route-path'
import CourseList from '../course-list/CourseList'
import MessageList from '../message/MessageList'
import Profile from '../profile/Profile'

interface IMainProps {}

const mapState = (state: IGlobalState) => {
  return {
    userInfo: state.user.userInfo
  }
}
type IStateProps = ReturnType<typeof mapState>
interface IActionProps {
  getUserInfo(): Promise<void>
}

type IMainAllProps = IMainProps & IStateProps & IActionProps

function Main(props: IMainAllProps) {
  useEffect(() => {
    if (!props.userInfo) {
      props.getUserInfo()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <>
      {/* <Redirect to={E_ROUTE_PATH.COURSE_LIST} /> */}
      <Switch>
        <Route path={E_ROUTE_PATH.COURSE_LIST}>
          <CourseList />
        </Route>
        <Route path={E_ROUTE_PATH.MESSAGE_LIST}>
          <MessageList />
        </Route>
        <Route path={E_ROUTE_PATH.PROFILE}>
          <Profile />
        </Route>
      </Switch>
    </>
  )
}

const mapAction = {
  getUserInfo: getUserInfo
}

export default connect(mapState, mapAction)(Main)
